<template>
  <div class="data-analy-box">
    <div style="padding: 5px" class="user-table" v-if="filterAdd.length > 0">
      <!-- <img
        src="/img/left-menu/filter.png"
        alt=""
        class="test-icon test-icon-img"
        @click.stop="showFilterBox"
        title="表格筛选"

      >
      <i
        class="el-icon-setting test-icon"
        @click.stop="showFilterDialog"
        title="表格属性列设置"
      ></i> -->
      <AkTable
        ref="AkTable"
        :tableLoding="tableLoding"
        :sortAttr="filterSortObj"
        :tableData="filterList"
        :labelObj="filterLabel"
        :addList="filterAdd"
        :checkedIdAttr="'id'"
        :checkedId="userLineId"
        :agencyAttrList="['name']"
        @changeSort="changeSortType"
        :filterListObj="filterListObj"
        @changeCId="changeCId"
        @filterChange="filterChange"
      >
      </AkTable>

      <div class="pagination-container">
        <el-pagination
          :hide-on-single-page="true"
          :disabled="tableLoding"
          background
          small
          layout="prev, pager, next"
          :total="filterTotal"
          :page-size="filterPageSize"
          :current-page="filterPageNum"
          align="right"
          :pager-count="5"
          @filterChange="filterChange"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import AkTable from '@/components/gisPageComponents/table'
import { getDailyAddList } from '@/apis/gis'
export default {
  components: { AkTable },
  data() {
    return {
      filterLabel: {
        name: '场景名称',
        areaType: '场景类型',
        mobileNum: '移动',
        unicomNum: '联通',
        telecomNum: '电信'
      },
      filterPageSize: 10,
      filterList: [],
      filterAdd: ['name', 'areaType', 'mobileNum', 'unicomNum', 'telecomNum'],
      filterSortObj: {
        //需要排序的字段
        unicomNum: 'custom',
        telecomNum: 'custom',
        mobileNum: 'custom'
      },
      sortType: 1,
      sortStr: 'mobileNum',
      areaTypeList: [],
      filterListObj: {
        areaType: [
          { text: '居民区', value: '居民区' },
          { text: '产业园区', value: '产业园区' },
          { text: '商务写字楼', value: '商务写字楼' },
          { text: '政府及事业单位', value: '政府及事业单位' },
          { text: '高校', value: '高校' }
        ]
      },
      tableLoding: false,
      filterTotal: 0,
      filterPageNum: 1
    }
  },
  props: {
    form: {
      type: Object,
      default: () => {}
    }
  },
  // mounted() {
  //   // this.getList()
  // },
  watch: {
    form: {
      handler(val) {
        // this.reset()
        this.getList()
        // console.log(val, 'test')
      },
      deep: true
    }
  },
  methods: {
    getList() {
      let data = {
        day: this.form.ptMonth,
        zoneId: this.form.zoneId,
        townId: this.form.townId,
        type: 3,
        areaId: this.form.areaId,
        areaTypeList: this.areaTypeList,
        pageSize: this.filterPageSize,
        pageNum: this.filterPageNum,
        sortType: this.sortType,
        sortStr: this.sortStr
      }
      this.tableLoding = true
      getDailyAddList(data)
        .then(res => {
          if (res.code == 1) {
            this.filterList = res.data.list || []
            this.filterTotal = res.data.total
            this.tableLoding = false
          }
        })
        .catch(() => {
          this.tableLoding = false
        })
    },
    reset() {
      this.filterPageNum = 1
      this.sortType = 1
      this.$refs.AkTable.$refs.elTable.clearSort()
      this.sortStr = 'mobileNum'
      this.areaTypeList = []
    },
    userLineId(id) {
      this.$emit('checkedId', id)
    },
    // 更改sort
    changeSortType(e) {
      // console.log(e)
      this.sortStr = e.sortStr
      this.sortType = e.sortType
      this.getList()
      // this.setFilterSort(e)
    },
    changeCId(e, type) {
      // console.log(e)
      let data = {
        ptMonth: this.form.ptMonth,
        type: 3,
        areaId: e
      }
      this.$emit('locaclAraa', data)
    },
    changePage(data) {
      this.filterPageNum = data
      this.getList()
    },
    filterChange(data) {
      // console.log(data)
      this.areaTypeList = data.areaType
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.data-analy-box {
  .test-icon {
    cursor: pointer;
    position: absolute;
    top: 7px;
    right: 30px;
    font-size: 17px;
    color: #fff;
    z-index: 2;
  }
  .test-icon-img {
    width: 17px;
    height: 17px;
    right: 54px;
  }
  .download-icon-img {
    width: 18px;
    height: 18px;
    // right: 73px;
  }
}
</style>
